<template>
    <div id="halfRank" class="half">
        <div>
            <img
                class="info-alert"
                :src="this.defaultConfig.windowVideo"
            />
            <div class="close-btn">   
                <img
                    class="close-btn-img"
                    @click="onClickClose"
                    :src="this.defaultConfig.windowClose"
                />
            </div>
            <div class="info">
                <div class="info-title">排行榜</div>
                <div class="info-text">
                    <table>
                        <thead>
                            <th>排名</th>
                            <th>用户名</th>
                            <th>积分</th>
                        </thead>
                        <tbody>
                            <tr>
                                <td>{{item}}</td>
                                <td></td>
                                <td></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import axios from "axios";
import $getImgUrl from 'lv/Util/getImgUrl';
import { EventBus } from "../utils/EventBus.js";

export default {
    name: "AlertRank",
    data() {
        return {
            text:"",
            title:"",
            rankList: [],
            callback: undefined,
        };
    },
    methods: {
        onClickClose() {
            let height = parseFloat(
                window.getComputedStyle(document.getElementById("halfRank")).height
            );
            if (this.callback) this.callback();
            let that = this;
            this.tweenMove("halfRank", 0, height, 200, function () {
                that.deleteRank();
            });
        },
        getImg(url, size) {
            url = url || '';
            url = url.replace(/\?[^?]+/, '');
            size = size * document.documentElement.clientWidth / 375;
            const imgUrl = $getImgUrl({
                url,
                type: [ 'jpg'],
                size
            });
            return imgUrl;
        },
    },
    async created(){
        let url = "https://h5access.yangshipin.cn/web/detail_share?vappid=59306155&vsecret=b42702bf7309a179d102f3d51b1add2fda0bc7ada64cb801&raw=1&vid=" + this.videoid;
        await axios.get(url).then((res) => {
            let temp = this.getImg(res.data.data.cover_pic,1000);
            this.videovocer = temp;
            this.videoConfig.vid = res.data.data.vid
            this.videoConfig.poster = temp
        })
    },
    mounted() {
        let that = this;
        setTimeout(() => {
            let height = parseFloat(
                window.getComputedStyle(document.getElementById("halfRank")).height
            );
            that.tweenMove("halfRank", 0, -height, 200);
        }, 200);
    },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .info-alert{
        width:100%;
        height: 450px;
        margin-top: 50px;
    }
    .close-btn{
        position: absolute;
        right: 12px;
        top: 62px;
    }
    .close-btn-img{
        width: 48px;
    }
    .info{
        position: absolute;
        top:90px;
        margin: 5px 25px;
        
    }
    .info-title{
        color: #F0D532;
        text-align: center;
        font-size: 18px;
        font-weight: bold;
        margin: 10px 0px;
    }
    .info-text{
        height: 140px;
        font-size: 14px;
        letter-spacing: 1px;
        color: #fff;
        margin-bottom: 5px;
        text-indent:2em;
    }
    .half {
        width: 100%;
        height: 100%;
        position: fixed;
        left: 0;
        bottom: -100%;
        z-index: 9999;
        font-family: PingFangSC-Medium, PingFang SC;
        background:#000;
    }
</style>

